<template>
  <div class="info">
    <div class="conten">
      <div class="title">
        修改信息
      
      </div>
      <div class="item">
        <span>头像</span>
        <img src="/images/马里奥.png" alt="">
      </div>
      <div class="item">
        <span>手机号码</span>
        <span>{{userinfo.user_phone||'错误'}}</span>
      </div>
      <div class="item">
        <span>昵称</span>
        <el-input type="text" placeholder="请输入昵称" v-model='user_nickname' maxlength="10" show-word-limit class="text">
        </el-input>
      </div>
      <div class="item">
        <span>性别</span>
        <el-select v-model="user_sex" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="item">
        <span>生日</span>
        <el-date-picker v-model="user_birthday" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
        </el-date-picker>
      </div>
      <div class="item">
        <span>个性签名</span>
        <el-input type="text" placeholder="请输入内容" v-model="user_sign" maxlength="20" show-word-limit class="text">
        </el-input>
      </div>
      <div class="foot">
        <button class="but" @click="update">修改完成</button>
      </div>

    </div>

  </div>
</template>

<script>
import { changeuserinfo } from '@/api/index.js'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      options: [
        { value: '男', label: '男' },
        { value: '女', label: '女' }
      ],
      user_sex: '',
      //日历
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      //生日
      user_birthday: '',

      //个性签名
      user_sign: '',
      //昵称
      user_nickname: ''
    }
  },
  computed: {
    ...mapGetters(['userinfo'])
  },

  methods: {
    //修改完成
    async update() {
      let result = await changeuserinfo({ id: this.userinfo.id, nickname: this.user_nickname, sign: this.user_sign, birthday: this.user_birthday, sex: this.user_sex })

      if (result.data.code == 200) {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.$store.dispatch('getuserinfo', { user_id: this.userinfo.id })
      
      }
        this.userinfo.id = ''
        this.user_nickname = ''
        this.user_sign = ''
        this.user_birthday = ''
        this.user_sex = ''
    }
  },

}
</script>

<style lang='less' scoped>
.info {
  .conten {
    margin: 40px 20%;

    .title {
      font-size: 18px;
      font-weight: 800;
    }
    .item {
      display: flex;
      height: 80px;
      justify-content: space-between;

      margin-top: 10px;
      align-items: center;

      box-shadow: 0 2px 0 0 #323233;

      img {
        width: 80px;
        height: 80px;
        border-radius: 15%;
      }
      span {
        margin-left: 10px;
        font-weight: 800;
      }
      .text {
        width: 40%;
      }
    }
    .foot {
      text-align: center;
      .but {
        margin-top: 20px;
        height: 40px;
        width: 100px;
        background: #323233;
        color: #797992;
      }
    }
  }
}
/deep/.el-select .el-input__inner:focus {
  border-color: #323233;
}
/deep/.el-input__inner:focus {
  border-color: #323233;
}
</style>